<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jquery学习</title>
		<script src="../js/jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			button{
				margin-top: 20px;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<h2>你的爱好是：</h2>
		<input type="checkbox" name="hobby" id="" value="" />足球
		<input type="checkbox" name="hobby" id="" value="" />篮球
		<input type="checkbox" name="hobby" id="" value="" />羽毛球
		<input type="checkbox" name="hobby" id="" value="" />乒乓球
		<br>
		<button type="button" id="all">全选</button>
		<button type="button" id="reverse">全不选</button>
		<button type="button" id="no">反选</button>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#all').on('click',function(){
					$('input[name="hobby"]').prop('checked','checked');//实现全选的功能
				});
				/* $('#reverse').on('click',function(){
					$('input[name="hobby"]').removeProp('checked');//全不选的功能
				
				}); */
				$('#reverse').on('click',function(){
					$('input[name="hobby"]').removeProp('checked');//全不选的功能
				});
				$('#no').on('click',function(){//实现反选功能
					$('input[name="hobby"]').each(function(index,elem){
						/* if($(elem).prop('checked')){
							$(elem).removeProp('checked');
						} else {
							$(elem).prop('checked','checked');
						} */
						this.checked = ! this.checked ;
						console.log(this);
					});
				});
			}) ;
				
			
		</script>
	</body>
</html>
